<template>
  <section id="ai-knowledge-section" class="section">
    <div class="container">
      <div class="section-title">
        <h2>AI 知识介绍</h2>
        <p>了解人工智能的基础知识，探索AI技术的奥秘与应用</p>
      </div>
      <div class="app-templates">
        <input type="radio" name="tabs" id="tab-0" v-model="activeTab" value="0" checked>
        <input type="radio" name="tabs" id="tab-1" v-model="activeTab" value="1">
        <input type="radio" name="tabs" id="tab-2" v-model="activeTab" value="2">
        <input type="radio" name="tabs" id="tab-3" v-model="activeTab" value="3">
        <div class="app-tabs">
          <label for="tab-0" class="app-tab" :class="{ active: activeTab === '0' }">
            <i class="fas fa-brain"></i> 什么是人工智能
          </label>
          <label for="tab-1" class="app-tab" :class="{ active: activeTab === '1' }">
            <i class="fas fa-cogs"></i> 什么是AI模型
          </label>
          <label for="tab-2" class="app-tab" :class="{ active: activeTab === '2' }">
            <i class="fas fa-network-wired"></i> 什么是大模型
          </label>
          <label for="tab-3" class="app-tab" :class="{ active: activeTab === '3' }">
            <i class="fas fa-lightbulb"></i> 大模型使用技巧
          </label>
        </div>
        <div class="app-content">
          <!-- 什么是人工智能 -->
          <div class="app-panel" :class="{ active: activeTab === '0' }" id="panel-0">
            <div class="knowledge-content">
              <div class="knowledge-item">
                <h3><i class="fas fa-info-circle"></i> 人工智能的定义</h3>
                <p>人工智能（Artificial Intelligence，简称AI）是计算机科学的一个分支，旨在开发能够模拟人类智能行为的系统和软件。人工智能的核心目标是使机器能够像人类一样思考、学习、推理和解决问题。</p>
              </div>
              
              <div class="knowledge-item">
                <h3><i class="fas fa-history"></i> 人工智能的发展历程</h3>
                <p>人工智能的概念最早由计算机科学家约翰·麦卡锡在1956年的达特茅斯会议上提出。自那时以来，AI经历了多次繁荣与低谷，包括：</p>
                <ul>
                  <li><strong>第一次AI浪潮（1950s-1970s）</strong>：符号主义AI的兴起，专家系统的发展</li>
                  <li><strong>第一次AI寒冬（1970s-1980s）</strong>：计算资源不足，预期过高</li>
                  <li><strong>第二次AI浪潮（1980s-1990s）</strong>：专家系统和机器学习的发展</li>
                  <li><strong>第二次AI寒冬（1990s-2000s）</strong>：专家系统局限性显现</li>
                  <li><strong>第三次AI浪潮（2010s至今）</strong>：深度学习和大数据推动的AI复兴</li>
                </ul>
              </div>
              
              <div class="knowledge-item">
                <h3><i class="fas fa-puzzle-piece"></i> 人工智能的主要分支</h3>
                <ul>
                  <li><strong>机器学习</strong>：让计算机通过数据学习模式和规律</li>
                  <li><strong>深度学习</strong>：基于神经网络的复杂模式识别</li>
                  <li><strong>自然语言处理</strong>：使计算机理解和生成人类语言</li>
                  <li><strong>计算机视觉</strong>：让计算机理解和分析图像和视频</li>
                  <li><strong>机器人技术</strong>：将AI应用于物理世界的交互</li>
                  <li><strong>专家系统</strong>：模拟人类专家决策能力的系统</li>
                </ul>
              </div>
              
              <div class="knowledge-item">
                <h3><i class="fas fa-rocket"></i> 人工智能的应用领域</h3>
                <p>AI技术已经广泛应用于各行各业：</p>
                <ul>
                  <li><strong>医疗健康</strong>：疾病诊断、药物研发、医疗影像分析</li>
                  <li><strong>金融服务</strong>：风险评估、欺诈检测、智能投顾</li>
                  <li><strong>交通出行</strong>：自动驾驶、智能交通管理</li>
                  <li><strong>智能制造</strong>：预测性维护、质量控制</li>
                  <li><strong>教育领域</strong>：个性化学习、智能辅导</li>
                  <li><strong>客户服务</strong>：智能客服、聊天机器人</li>
                  <li><strong>内容创作</strong>：文本生成、图像合成、音乐创作</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 什么是AI模型 -->
          <div class="app-panel" :class="{ active: activeTab === '1' }" id="panel-1">
            <div class="knowledge-content">
              <div class="knowledge-item">
                <h3><i class="fas fa-chart-line"></i> AI模型的基本概念</h3>
                <p>AI模型是一种数学表示或算法结构，通过学习数据中的模式来执行特定任务。简单来说，AI模型就像是一个能够从经验中学习并做出预测或决策的智能系统。</p>
                <p>一个典型的AI模型通常包含以下组件：</p>
                <ul>
                  <li><strong>输入层</strong>：接收原始数据</li>
                  <li><strong>处理层</strong>：对数据进行转换和分析</li>
                  <li><strong>输出层</strong>：产生预测结果或决策</li>
                  <li><strong>参数</strong>：模型从数据中学习到的知识表示</li>
                </ul>
              </div>
              
              <div class="knowledge-item">
                <h3><i class="fas fa-layer-group"></i> AI模型的类型</h3>
                <p>根据不同的学习方式和应用场景，AI模型可以分为多种类型：</p>
                <ul>
                  <li><strong>监督学习模型</strong>：使用标记数据进行训练，如线性回归、决策树、支持向量机</li>
                  <li><strong>无监督学习模型</strong>：从无标记数据中发现模式，如聚类、降维算法</li>
                  <li><strong>半监督学习模型</strong>：结合少量标记数据和大量无标记数据</li>
                  <li><strong>强化学习模型</strong>：通过与环境交互和奖惩机制学习最优策略</li>
                  <li><strong>深度学习模型</strong>：基于多层神经网络的复杂模型，如CNN、RNN、Transformer</li>
                </ul>
              </div>
              
              <div class="knowledge-item">
                <h3><i class="fas fa-cogs"></i> AI模型的训练过程</h3>
                <p>训练一个AI模型通常包括以下步骤：</p>
                <ol>
                  <li><strong>数据收集</strong>：获取足够数量和质量的训练数据</li>
                  <li><strong>数据预处理</strong>：清洗、转换、标准化数据</li>
                  <li><strong>特征工程</strong>：提取和选择有用的特征</li>
                  <li><strong>模型选择</strong>：根据任务选择合适的模型架构</li>
                  <li><strong>模型训练</strong>：使用数据调整模型参数</li>
                  <li><strong>模型评估</strong>：使用测试数据评估模型性能</li>
                  <li><strong>模型优化</strong>：调整超参数，改进模型性能</li>
                  <li><strong>模型部署</strong>：将训练好的模型应用到实际场景</li>
                </ol>
              </div>
              
              <div class="knowledge-item">
                <h3><i class="fas fa-balance-scale"></i> AI模型的评估指标</h3>
                <p>不同类型的AI任务使用不同的评估指标：</p>
                <ul>
                  <li><strong>分类任务</strong>：准确率、精确率、召回率、F1分数、ROC曲线</li>
                  <li><strong>回归任务</strong>：均方误差、平均绝对误差、R²分数</li>
                  <li><strong>聚类任务</strong>：轮廓系数、 Davies-Bouldin指数</li>
                  <li><strong>生成任务</strong>：困惑度、BLEU分数、CIDEr分数</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 什么是大模型 -->
          <div class="app-panel" :class="{ active: activeTab === '2' }" id="panel-2">
            <div class="knowledge-content">
              <div class="knowledge-item">
                <h3><i class="fas fa-microchip"></i> 大模型的定义与特点</h3>
                <p>大模型（Large Language Model，LLM）通常指具有数十亿甚至数千亿参数的深度学习模型，能够处理和生成自然语言内容。大模型的主要特点包括：</p>
                <ul>
                  <li><strong>规模庞大</strong>：参数数量达到数十亿甚至数千亿级别</li>
                  <li><strong>预训练能力</strong>：在海量文本数据上进行预训练</li>
                  <li><strong>泛化能力强</strong>：能够适应多种任务而无需大量特定训练</li>
                  <li><strong>上下文理解</strong>：能够理解长文本的上下文关系</li>
                  <li><strong>涌现能力</strong>：随着规模扩大，展现出未明确编程的能力</li>
                </ul>
              </div>
              
              <div class="knowledge-item">
                <h3><i class="fas fa-code-branch"></i> 主要的大模型</h3>
                <p>近年来，国内外多家科技公司和研究机构开发了著名的大模型：</p>
                <ul>
                  <li><strong>ChatGLM</strong>：由清华大学和智谱AI开发的中文大模型，在中文理解和生成方面表现优异</li>
                  <li><strong>文心一言</strong>：由百度开发的中文大模型，结合了百度搜索引擎的海量数据优势</li>
                  <li><strong>讯飞星火</strong>：由科大讯飞开发的中文认知大模型，在语音交互方面有独特优势</li>
                  <li><strong>DeepSeek</strong>：由深度求索(DeepSeek)公司开发的高性能大模型，支持多模态能力</li>
                  <li><strong>通义千问</strong>：由阿里巴巴达摩院开发的中文大模型，在电商和商业场景有丰富应用</li>
                  <li><strong>豆包</strong>：由字节跳动开发的AI对话产品，基于自研大模型技术</li>
                  <li><strong>智谱清言</strong>：由智谱AI开发的对话大模型，支持多轮对话和复杂推理</li>
                  <li><strong>GPT系列</strong>：由OpenAI开发的生成式预训练Transformer模型，包括GPT-3、GPT-3.5、GPT-4等，是目前全球影响力最大的大模型</li>
                </ul>
              </div>
              
              <div class="knowledge-item">
                <h3><i class="fas fa-brain"></i> 大模型的工作原理</h3>
                <p>大模型主要基于Transformer架构，工作原理包括：</p>
                <ol>
                  <li><strong>自注意力机制</strong>：能够捕捉文本中不同位置之间的依赖关系</li>
                  <li><strong>预训练阶段</strong>：在海量文本数据上学习语言模式和知识</li>
                  <li><strong>微调阶段</strong>：使用特定任务数据或人类反馈调整模型行为</li>
                  <li><strong>推理阶段</strong>：根据输入生成连贯、相关的输出</li>
                </ol>
                <p>现代大模型通常采用自监督学习方法，通过预测文本中的缺失部分来学习语言理解和生成能力。</p>
              </div>
              
              <div class="knowledge-item">
                <h3><i class="fas fa-lightbulb"></i> 大模型的应用与挑战</h3>
                <p><strong>主要应用：</strong></p>
                <ul>
                  <li>内容创作和编辑</li>
                  <li>智能问答和客服</li>
                  <li>代码生成和辅助编程</li>
                  <li>语言翻译和文本摘要</li>
                  <li>个性化教育和辅导</li>
                  <li>数据分析和报告生成</li>
                </ul>
                <p><strong>主要挑战：</strong></p>
                <ul>
                  <li>计算资源需求巨大</li>
                  <li>可能产生不准确或有偏见的输出</li>
                  <li>数据隐私和安全问题</li>
                  <li>模型可解释性差</li>
                  <li>潜在的滥用风险</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 大模型使用技巧 -->
          <div class="app-panel" :class="{ active: activeTab === '3' }" id="panel-3">
            <div class="knowledge-content">
              <div class="knowledge-item">
                <h3><i class="fas fa-thumbs-up"></i> 编写有效提示的基本原则</h3>
                <p>要提高与大模型对话的准确率，编写高质量的提示至关重要：</p>
                <ul>
                  <li><strong>明确具体</strong>：避免模糊不清的表述，明确指出你想要什么</li>
                  <li><strong>简洁明了</strong>：用简洁的语言表达需求，避免不必要的冗长</li>
                  <li><strong>结构化</strong>：使用清晰的结构组织信息，如列表、分点等</li>
                  <li><strong>提供上下文</strong>：给出足够的背景信息，帮助模型理解问题</li>
                  <li><strong>设定格式</strong>：明确要求输出的格式，如JSON、列表等</li>
                </ul>
              </div>
              
              <div class="knowledge-item">
                <h3><i class="fas fa-magic"></i> 高级提示技巧</h3>
                <ol>
                  <li><strong>角色设定法</strong>
                    <ul>
                      <li>为模型指定特定角色，如"你是一位专业的软件工程师"</li>
                      <li>示例："作为一名资深财务顾问，请分析以下投资方案的风险..."</li>
                    </ul>
                  </li>
                  <li><strong>Few-shot学习法</strong>
                    <ul>
                      <li>提供几个示例，让模型学习你期望的输出格式</li>
                      <li>示例："请按照以下格式翻译：
                        英文：Hello world
                        中文：你好世界
                        英文：How are you?
                        中文：你好吗？
                        英文：Thank you
                        中文："</li>
                    </ul>
                  </li>
                  <li><strong>思维链法</strong>
                    <ul>
                      <li>引导模型一步步思考问题，而不是直接给出答案</li>
                      <li>示例："让我们一步步解决这个问题：1. 首先分析条件... 2. 然后考虑可能的解决方案..."</li>
                    </ul>
                  </li>
                  <li><strong>逐步细化法</strong>
                    <ul>
                      <li>先提出大致需求，然后逐步细化和修正</li>
                      <li>通过多轮对话不断完善结果</li>
                    </ul>
                  </li>
                </ol>
              </div>
              
              <div class="knowledge-item">
                <h3><i class="fas fa-search"></i> 针对不同任务的提示策略</h3>
                <ul>
                  <li><strong>信息检索</strong>
                    <ul>
                      <li>明确时间范围："2023年之前的人工智能发展历程"</li>
                      <li>指定信息类型："请提供三个关于气候变化的科学研究结论"</li>
                    </ul>
                  </li>
                  <li><strong>内容创作</strong>
                    <ul>
                      <li>指定风格："以专业学术风格解释量子计算"</li>
                      <li>设定字数："写一篇300字左右的产品介绍"</li>
                      <li>明确受众："为初学者写一份Python入门指南"</li>
                    </ul>
                  </li>
                  <li><strong>问题解决</strong>
                    <ul>
                      <li>提供约束条件："在不使用排序算法的情况下，找出数组中的最大值"</li>
                      <li>明确评估标准："设计一个高效、安全且用户友好的登录系统"</li>
                    </ul>
                  </li>
                </ul>
              </div>
              
              <div class="knowledge-item">
                <h3><i class="fas fa-sync-alt"></i> 提示词优化与迭代</h3>
                <p>提高提示质量是一个迭代过程：</p>
                <ol>
                  <li><strong>记录有效提示</strong>：保存效果好的提示模板，建立自己的提示词库</li>
                  <li><strong>分析失败案例</strong>：了解为什么某些提示效果不佳，找出改进点</li>
                  <li><strong>A/B测试</strong>：尝试不同版本的提示，比较效果</li>
                  <li><strong>反馈调整</strong>：根据模型的输出，针对性地调整提示</li>
                </ol>
                <p><strong>常见错误及避免方法：</strong></p>
                <ul>
                  <li><strong>过度复杂</strong>：将多个任务混在一起，导致模型理解困难</li>
                  <li><strong>信息不足</strong>：缺少必要的上下文或背景信息</li>
                  <li><strong>指令冲突</strong>：在同一个提示中包含相互矛盾的要求</li>
                  <li><strong>期望过高</strong>：要求模型完成超出其能力范围的任务</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'AIKnowledgeIntroduction',
  data() {
    return {
      activeTab: '0' // 默认显示第一个tab (什么是人工智能)
    };
  }
};
</script>

<style scoped>
/* CSS 变量回退 */
.section {
  --primary: #4361ee;
  --primary-light: #4895ef;
  --secondary: #3a0ca3;
  --accent: #4cc9f0;
  --bg-card: #ffffff;
  --bg-section: #f8f9ff;
  --text-primary: #1a1a2e;
  --text-secondary: #4a4a6a;
  --border-light: #e6e9ff;
  --border-medium: #d1d5db;
  --text-muted: #9ca3af;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-md: 0 6px 20px rgba(67, 97, 238, 0.12);
  --transition: all 0.3s ease;
}

/* 知识内容样式 */
.knowledge-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 700px; /* 增加高度以显示更多内容 */
  overflow-y: auto; /* 添加垂直滚动条 */
  padding-right: 10px; /* 为滚动条留出空间 */
}

/* 自定义滚动条样式 */
.knowledge-content::-webkit-scrollbar {
  width: 8px;
}

.knowledge-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.knowledge-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.knowledge-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.knowledge-item {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #e6e9ff;
  transition: all 0.3s ease;
}

.knowledge-item:hover {
  box-shadow: 0 8px 25px rgba(67, 97, 238, 0.08);
  transform: translateY(-2px);
}

.knowledge-item h3 {
  font-size: 1.4rem;
  color: #1a1a2e;
  margin-bottom: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.knowledge-item h3 i {
  color: #4361ee;
  font-size: 1.2rem;
}

.knowledge-item p {
  color: #4a4a6a;
  line-height: 1.6;
  margin-bottom: 16px;
  font-size: 1.05rem;
}

.knowledge-item p:last-child {
  margin-bottom: 0;
}

.knowledge-item ul,
.knowledge-item ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.knowledge-item ul:last-child,
.knowledge-item ol:last-child {
  margin-bottom: 0;
}

.knowledge-item li {
  color: #4a4a6a;
  line-height: 1.6;
  margin-bottom: 8px;
  font-size: 1rem;
}

.knowledge-item li:last-child {
  margin-bottom: 0;
}

.knowledge-item li strong {
  color: #1a1a2e;
  font-weight: 600;
}

/* 列表嵌套样式 */
.knowledge-item ul ul,
.knowledge-item ol ul {
  margin-top: 8px;
  margin-bottom: 8px;
}

.knowledge-item li li {
  font-size: 0.95rem;
}

/* 知识项标题和内容间距 */
.knowledge-item > p + ul,
.knowledge-item > p + ol {
  margin-top: -8px;
}

.knowledge-item ul + p,
.knowledge-item ol + p {
  margin-top: 16px;
}

.section {
  padding: 20px 0 60px;
  background: #ffffff;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
}

.section-title h2 {
  font-size: 2.2rem;
  margin-bottom: 15px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.3;
}

.section-title p {
  color: #4a4a6a;
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.5;
}

/* 隐藏原始radio */
.app-templates input[type="radio"] {
  display: none;
}

/* 应用模板区域 */
.app-templates {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 40px;
  -webkit-box-shadow: 0 6px 20px rgba(67, 97, 238, 0.12);
  box-shadow: 0 6px 20px rgba(67, 97, 238, 0.12);
  border: 1px solid #e6e9ff;
}

.app-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #f8f9ff;
  overflow-x: auto;
  border-bottom: 1px solid #e6e9ff;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.app-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.app-tab {
  padding: 16px 24px;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: #4a4a6a;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: transparent;
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-width: 120px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.app-tab i {
  margin-right: 8px;
  font-size: 1rem;
  width: 16px;
  text-align: center;
}

.app-tab:hover {
  color: #4361ee;
  background: rgba(67, 97, 238, 0.05);
}

.app-tab.active {
  color: #4361ee;
  background: #ffffff;
}

/* 激活状态的底部线条 */
.app-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #4361ee;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.app-tab.active::after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* 移除点击时的默认样式 */
.app-tab:focus {
  outline: none;
}

.app-content {
  padding: 30px;
}

.app-panel {
  display: none;
}

.app-panel.active {
  display: block;
  -webkit-animation: fadeIn 0.5s ease;
  animation: fadeIn 0.5s ease;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #1a1a2e;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.form-group label i {
  margin-right: 6px;
  font-size: 0.9rem;
  width: 16px;
  text-align: center;
}

.form-control {
  width: 100%;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 0.95rem;
  color: #1a1a2e;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: #4361ee;
  -webkit-box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.result-box {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  min-height: 100px;
  color: #4a4a6a;
}

/* 聊天界面样式 */
.chat-container {
  border: 1px solid #d1d5db;
  border-radius: 16px;
  overflow: hidden;
  height: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background: #ffffff;
}

.chat-messages {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 80%;
  margin-bottom: 16px;
}

.message.user {
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.message-content {
  padding: 12px 16px;
  border-radius: 18px;
  line-height: 1.5;
  font-size: 0.95rem;
}

.message.bot .message-content {
  background: #f8f9ff;
  border: 1px solid #e6e9ff;
  border-top-left-radius: 4px;
  color: #1a1a2e;
}

.message.user .message-content {
  background: -webkit-linear-gradient(90deg, #4361ee, #4895ef);
  background: linear-gradient(90deg, #4361ee, #4895ef);
  color: white;
  border-top-right-radius: 4px;
}

.chat-input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 20px;
  background: #f8f9ff;
  border-top: 1px solid #e6e9ff;
}

.chat-input input {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 24px;
  color: #1a1a2e;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-right: 12px;
  font-size: 0.95rem;
}

.chat-input input:focus {
  outline: none;
  border-color: #4361ee;
  -webkit-box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

/* 图像生成样式 */
.image-generator {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -15px;
}

.image-generator-form {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 300px;
  padding: 15px;
}

.image-preview {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 300px;
  padding: 15px;
  background: #f8f9ff;
  border-radius: 16px;
  height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #d1d5db;
}

.image-preview img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

/* 数据分析样式 */
.data-analysis {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -15px;
}

.data-analysis-form {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 300px;
  padding: 15px;
}

.chart-container {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 300px;
  padding: 15px;
  background: #f8f9ff;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.chart-placeholder {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #9ca3af;
  text-align: center;
}

.chart-placeholder i {
  margin-bottom: 12px;
  color: #d1d5db;
}

/* 语音识别样式 */
.voice-recognition {
  text-align: center;
  padding: 30px;
}

.voice-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: -webkit-linear-gradient(135deg, #4361ee, #4895ef);
  background: linear-gradient(135deg, #4361ee, #4895ef);
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 20px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-shadow: 0 6px 20px rgba(67, 97, 238, 0.12);
  box-shadow: 0 6px 20px rgba(67, 97, 238, 0.12);
  border: none;
}

.voice-btn:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.voice-btn.listening {
  background: -webkit-linear-gradient(135deg, #3a0ca3, #7c3aed);
  background: linear-gradient(135deg, #3a0ca3, #7c3aed);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-box-shadow: 0 0 25px rgba(124, 58, 237, 0.3);
  box-shadow: 0 0 25px rgba(124, 58, 237, 0.3);
  -webkit-animation: pulse 1.5s infinite;
  animation: pulse 1.5s infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.3);
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.3);
  }
  70% {
    -webkit-box-shadow: 0 0 0 15px rgba(124, 58, 237, 0);
    box-shadow: 0 0 0 15px rgba(124, 58, 237, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
  }
}

@keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.3);
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.3);
  }
  70% {
    -webkit-box-shadow: 0 0 0 15px rgba(124, 58, 237, 0);
    box-shadow: 0 0 0 15px rgba(124, 58, 237, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);
  }
}

/* 按钮样式 */
.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.btn i {
  margin-right: 6px;
  font-size: 0.8rem;
}

.btn-primary {
  background: -webkit-linear-gradient(135deg, #4361ee, #4895ef);
  background: linear-gradient(135deg, #4361ee, #4895ef);
  color: white;
  -webkit-box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);
  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);
}

.btn-primary:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 6px 16px rgba(67, 97, 238, 0.35);
  box-shadow: 0 6px 16px rgba(67, 97, 238, 0.35);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .image-generator,
  .data-analysis {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  
  .image-generator-form,
  .data-analysis-form,
  .image-preview,
  .chart-container {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .app-tabs {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .app-tab {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 140px;
    padding: 12px 16px;
    font-size: 0.9rem;
  }
  
  .app-tab i {
    font-size: 0.9rem;
    margin-right: 6px;
  }
  
  .app-content {
    padding: 20px;
  }
  
  .section-title h2 {
    font-size: 1.8rem;
  }
  
  .section-title p {
    font-size: 1rem;
  }
  
  .chat-container {
    height: 350px;
  }
  
  .message {
    max-width: 90%;
  }
  
  .voice-btn {
    width: 60px;
    height: 60px;
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 12px;
  }
  
  .section-title h2 {
    font-size: 1.6rem;
  }
  
  .section-title p {
    font-size: 0.9rem;
  }
  
  .app-tab {
    min-width: 120px;
    padding: 10px 12px;
    font-size: 0.85rem;
  }
  
  .app-tab i {
    font-size: 0.85rem;
    margin-right: 4px;
  }
  
  .app-content {
    padding: 15px;
  }
  
  .chat-container {
    height: 300px;
  }
  
  .chat-messages {
    padding: 15px;
  }
  
  .chat-input {
    padding: 15px;
  }
  
  .message-content {
    padding: 10px 14px;
    font-size: 0.9rem;
  }
}

/* 辅助类 */
.mb-3 {
  margin-bottom: 24px;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>